注意

マイルストーンv1.0までのフロントエンドの変更をMaiaに寄せるために、
レビュー中にMaris⇒MaiaへPRの移動を行いました。

途中のコメントはMarisの下記のPRを参照願います。

• カスタムエラーハンドラーをプラグイン化して循環参照を防ぐ maris#1862

このプルリクエストで実施したこと

• カスタムエラーをハンドリングするerrorHandler 関数をVueのプラグインに書き換えました。
• 既存のグローバルエラーハンドラーの名称をglobal-error-handlerに変更し、
  責務を明確化するとともにカスタムエラーハンドラーと形式を揃えました。

モチベーション

• エラーハンドラーから直接routerの実装をimportしたうえで、画面からエラーハンドラーをimportすると、動作自体は期待通りになるが、循環参照になってしまうという問題があります。
  （例）CataogView⇒ErrorHandler⇒router⇒catalogRoutes⇒CatalogView

• プラグインを使ったprovide/injectを用いることで、この問題を解決します。
  具体的には、
  App（親コンポーネント）でハンドラーをInjectionKeyに紐づけてprovideし、
  各画面（子コンポーネント）ではInjectionKeyを経由してInjectすることで、循環参照を避けることができます。

確認した点

注文処理実行時に401エラーが発生した際、想定通りログイン画面にルーティングされるよう修正されたことを確認しました。

下記のコメントのケースについて、修正前と動作が変わらないことを確認しました。

• エラーハンドラーからrouterを参照できない maris#1612 (comment)

グローバルエラーハンドラーについて、修正前と同様、
想定外エラーの発生時にコンソールにログ出力してエラーページに遷移することを確認しました。

このプルリクエストでは実施していないこと

ドキュメントの修正については別issue、PRにて対応いたします。
AzureADB2Cサンプルへの修正については別issue、別PRにて対応いたします。

Issue や Discussions 、関連する Web サイトなどへのリンク

プラグインの実装形式

プラグインの実装形式については、
vue-routerとpiniaを参考にしました。

inject時の非NULLアサーションの使用

injectする際に非NULLアサーションを使用しています。
return inject(customErrorHandlerKey)!;
対応するKeyのリソースをprovideしていなかった場合にNULLとなるためです。
そのため、main.tsでapp.useを書き忘れた場合は実行時エラーになります。

ただし、
・テスト時に確実に発覚する
・vue-routerでも同様の実装となっている
という理由から、特別処理する必要はないと考えます。

https://github.com/vuejs/router/blob/main/packages/router/src/useApi.ts#L12

プラグインが役立つユースケース

https://ja.vuejs.org/guide/reusability/plugins#introduction

グローバルエラーハンドラーは[app.config.globalProperties](https://ja.vuejs.org/api/application.html#app-config-globalproperties) にグローバルなインスタンスプロパティやメソッドを追加する。に対応し、
カスタムエラーハンドラーは[app.provide()](https://ja.vuejs.org/api/application.html#app-provide) を呼び出して、アプリケーション全体でリソースを[注入できる](https://ja.vuejs.org/guide/components/provide-inject.html)ようにする。に対応します。

useで始まる名称の使用

カスタムエラーハンドラーはuseで始まる名称の関数でラップしています。
このことにより、カスタムエラーハンドラーを利用する子コンポーネントから、inject()構文を隠蔽することができます。
一方でグローバルエラーハンドラーは子コンポーネントから明示的に呼び出すことがないので、
特にラップする必要はないと考えます。

use～はコンポーザブル関数に対する命名の慣例とされています。

Vue アプリケーションの文脈で「コンポーザブル（composable）」とは、Vue の Composition API を活用して状態を持つロジックをカプセル化して再利用するための関数です。
https://ja.vuejs.org/guide/reusability/composables#conventions-and-best-practices
コンポーザブル関数には "use" で始まるキャメルケースの名前をつけるのが慣例です。